// 动画开始的时候 页面一定要定位住 不然页面组件的布局是上下布局 导致动画效果不显示
// .main {
//   position: fixed;
//   top: 0;
//   width: 100vw;
//   min-height: 100vh;
//   background: white;
// }

.forward-enter {
  &:extend(.page);
  opacity: 0;
  transform: translateX(100%);
}

.forward-enter-active {
  &:extend(.page);
  opacity: 1;
  transform: translateX(0);
  transition: all 300ms linear;
}

.forward-exit {
  &:extend(.page);
  opacity: 1;
  transform: translateX(0);
}

.forward-exit-active {
  &:extend(.page);
  opacity: 0;
  transform: translateX(-100%);
  transition: all 300ms linear;
}

.back-enter {
  &:extend(.page);
  opacity: 0;
  transform: translateX(-100%);
}

.back-enter-active {
  &:extend(.page);
  opacity: 1;
  transform: translateX(0);
  transition: all 300ms linear;
}

.back-exit {
  &:extend(.page);
  opacity: 1;
  transform: translateX(0);
}

.back-exit-active {
  &:extend(.page);
  opacity: 0;
  transform: translate(100%);
  transition: all 300ms linear;
}
